<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="">
		<view class="bg-white">
			<uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
		</view> 
		<view class="pl-2 pr-3 pb-3">
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop"  @scroll="scroll" @scrolltolower="reachBottom">
				
					<view class="" v-for="(item,index) in dataList" :key="index">
						<view class="py-3 pl-2">{{item.name}}</view>
						<view class="flex flex-wrap"  v-if="item.childrens.length > 0">
							<view class="b-width" v-for="(item2,index2) in item.childrens" :key="index2">
								<view v-if="deskStatus == 'empty'" class="p-3 text-center font-weight-bolder" style="background-color: #909399;color: #ffffff;" @click="detail(item2,'empty')">
									<view class="p-1">{{item2.number}}</view>
									<view class="p-1">空闲中</view>
								</view>
								<view v-else class="p-3 text-center font-weight-bolder" style="background-color: #09b4f1;color: #ffffff;" @click="detail(item2,'ing')">
									<view class="p-1">{{item2.number}}</view>
									<view class="p-1">就餐中</view>
								</view>
								<view class="bg-white font-size-sm p-2 text-center">{{formatPast(item2.lastOrderTime)}}</view>
							</view>
						</view>
						<uv-empty text="暂无就餐中数据" v-else  margin-top="20" mode="list"></uv-empty>
					</view>
			
				
			
			</scroll-view>
		</view>
		<uv-tabbar :value="value" @change="index=>value = index" activeColor="#09b4f1">
			<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item text="订单" icon="order" @click="gopage('/pages/components/pages/merchant/order')"></uv-tabbar-item>
			<uv-tabbar-item text="桌台" icon="bell" @click="gopage('/pages/components/pages/merchant/bell')"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account" @click="gopage('/pages/components/pages/merchant/my')"></uv-tabbar-item>
			<uv-tabbar-item text="返回" icon="arrow-leftward" @click="gopage2('/pages/index/index')"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import { onShow,onUnload,onLoad,onReady} from '@dcloudio/uni-app'
import {
  getList
} from '@/api/due'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { formatPast } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('桌台')
const scrollHeight = ref(0)
const pH = ref(0)
const scrollTop = ref(-1)
const dataList = ref([])
const dx = ref(0)
const page = ref(1)
const pageSize = ref(10)
const lastPage = ref(false)
const listStatus = ref('loadmore')
let timer = ref('') 
let inter = null
const value = ref(2)
const deskStatus = ref('empty')

const list = ref( 
	[{
		name: '空闲中',
		value: 'empty'
	}, {
		name: '就餐中',
		value: 'ing'
	}]
)


onReady(()=>{
	uni.getSystemInfo({ 
		success(res) {
			pH.value = res.windowHeight 
			let scrollH = uni.createSelectorQuery().select(".sv")
			scrollH.boundingClientRect(data=>{
				let pH0 = pH.value
				scrollHeight.value = pH0 - data.top - 5  
			}).exec()
		}
	})
})

onLoad(() => {
	getData()
	// inter = setInterval(() => {
	// 	getData()
	// }, 30000)
})

onUnload(() => {
	//clearInterval(inter)
})

// 滚动到底部
const reachBottom = () => {

}

const handleSelect = (key) => {
  deskStatus.value = key.value
  getData()
}

const gopage = (url) => {
	uni.navigateTo({
		url
	})
}

const gopage2 = (url) =>{
	uni.switchTab({
		url
	}) 

}

const getNewPath = (path) => {
	const tempPath = decodeURIComponent(path);
	const strList = tempPath.split("?scene=");
	const scene = encodeURIComponent(strList[1]);
	const newPath = strList[0] +"?scene=" + scene;
	
	return newPath;
}

const detail = (desk,type) => {
	if(type == 'empty'){
		main.SET_UID_TYPE('admin')
		//单号不存在去开台
	
		let newPath = 'pages/components/pages/scan/scan?scene=id=' + desk.id + '&number='+desk.number+'&shopId=' + desk.shopId
		uni.navigateTo({
			url: '/' + getNewPath(newPath)
		})
		
		
		//// #ifdef  H5
		
		//// #endif
		
	}else{
		uni.navigateTo({
			url: '/pages/components/pages/orders/detail?id=' + desk.lastOrderNo + '&isMer=1'
		})
	}
	
}


const getData = async() => {
	let desks = await getList({
		shopId: merchartShop.value.id,
		deskStatus: deskStatus.value
	});
	
	dataList.value = desks

}

	
</script>

<style lang="scss">

 .b-width {
	 width:30%;
	 margin-left: 20rpx;
	 margin-top: 20rpx;
 }
	
</style>